<template>
	<div class="yh_content foSi14">
		<div class="btn-group_top">
			<el-button type="primary" class="bac6b7" @click.stop="back" size="small">返回列表</el-button>
		</div>
		<div class="yh_topsearch yh_dis yh_disJub" style="border: none; padding: 0px;">
			<div class="block yh_dis" style="margin-top: 10px">
				<div>
					<div class="demonstration yh_qs yh_font13">发卡时间</div>
					<el-date-picker v-model="search.birthday_start" class="date" style="width: 120px;" size="small"
						type="date" placeholder="开始时间" />
					<el-date-picker v-model="search.birthday_end" class="date mar-left5" style="width: 120px;"
						size="small" type="date" placeholder="截至日期" />
				</div>
				<div style="margin-left: 10px">
					<div class="demonstration yh_qs yh_font13">会员生日</div>
					<el-date-picker v-model="search.birthday_start1" class="date" style="width: 120px;" size="small"
						type="date" placeholder="开始时间" />
					<el-date-picker v-model="search.birthday_end1" class="date mar-left5" style="width: 120px;"
						size="small" type="date" placeholder="截至日期" />
				</div>
				<div style="margin-left: 10px">
					<div class="demonstration yh_qs yh_font13">渠道来源</div>
					<el-select v-model="search.source" style="width: 100px" size="small" placeholder="请选择">
						<el-option v-for="(item,index) in search.sourceList" :key="index" :label="item.source_title"
							:value="item.source_id" />
					</el-select>
				</div>
				<div style="margin-left: 10px">
					<div class="demonstration yh_qs yh_font13">会籍顾问</div>
					<el-select v-model="search.consultant" style="width: 100px" size="small" placeholder="请选择">
						<el-option v-for="(item,index) in search.consultantList" :key="index"
							:label="item.consultant_name" :value="item.consultant_id" />
					</el-select>
				</div>
				<div style="margin-left: 10px">
					<div class="demonstration yh_qs yh_font13">活动名称</div>
					<el-select v-model="search.activitis" style="width: 100px" size="small" placeholder="请选择">
						<el-option v-for="(item,index) in search.activitisList" :key="index" :label="item.activity_name"
							:value="item.activity_id" />
					</el-select>
				</div>
				<div style="margin-left: 10px">
					<el-button type="primary" class="mar-top20 bac6b7" size="small">搜索</el-button>
				</div>
			</div>
		</div>
		<div class="base-title mar-top25">导出类型及字段</div>
		<div class="item-p1 item-l dis disAl mar-bott5">
			<div class="export-label hei32 dis disAl">导出类型</div>
			<div>导出会员</div>
		</div>
		<div class="item-p1 item-l">
			<div class="export-label hei32 mar-top10">导出字段</div>
			<div class="dis disAl flwa">
				<div v-for="(item,index) in list" :key="index" class="export-field__item dis disAl">
					<el-checkbox v-model="item.is_default" :true-label="1" :false-label="0" @change="listChange(index)"
						:disabled="item.is_not_editable === 1" />
					<span class="mar-left10">{{item.title}}</span>
				</div>
			</div>
			<div class="export-btn-group">
				<div class="que coFFF mar cuPo">导出</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		searchSousuo
	} from '@/api/member'
	export default {
		name: 'memberExport',
		components: {},
		data() {
			return {
				search: {
					birthday_start: '', // 发卡开始时间
					birthday_end: '', // 发卡结束时间
					birthday_start1: '', // 会员生日时间
					birthday_end1: '', // 会员生日时间
					consultantList: [],
					activitisList: [],
					sourceList: [],
					consultant: -1,
					activitis: "-1",
					source: -1
				},
				list: [],
				cunList: [],
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var query = this.$route.query
			this.type = Number(query.type)
			var xuanList = [{
				name: '批量导出会员',
				url: '/member/memberExport',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getSousuoList()
		},
		methods: {
			listChange(index) {
				if (this.cunList.indexOf(this.list[index]) === -1) {
					this.cunList.push(this.list[index])
				} else {
					this.cunList.splice(this.cunList.indexOf(this.list[index]), 1)
				}
				console.log(this.list)
			},
			back() {
				this.$router.go(-1)
			},
			getSousuoList() {
				var data = {
					"consultant_stat": [{
							"consultant_id": -1,
							"consultant_name": "全部",
							"count": 2348
						},
						{
							"consultant_id": 174,
							"consultant_name": "黎艳容",
							"count": 117
						},
						{
							"consultant_id": 179,
							"consultant_name": "郁晓婷",
							"count": 11
						},
						{
							"consultant_id": 173,
							"consultant_name": "于媛媛",
							"count": 38
						},
						{
							"consultant_id": 0,
							"consultant_name": "未选择",
							"count": 1470
						},
						{
							"consultant_id": 177,
							"consultant_name": "陈婉芬",
							"count": 124
						},
						{
							"consultant_id": 178,
							"consultant_name": "郭佳钰",
							"count": 85
						},
						{
							"consultant_id": 176,
							"consultant_name": "丁娣",
							"count": 56
						},
						{
							"consultant_id": 200,
							"consultant_name": "刘嘉",
							"count": 2
						},
						{
							"consultant_id": 182,
							"consultant_name": "肖琪",
							"count": 7
						},
						{
							"consultant_id": 175,
							"consultant_name": "冯文琴",
							"count": 28
						},
						{
							"consultant_id": 213,
							"consultant_name": "丹丹",
							"count": 13
						},
						{
							"consultant_id": 246,
							"consultant_name": "刘月兰",
							"count": 5
						},
						{
							"consultant_id": 267,
							"consultant_name": "尉光琴",
							"count": 46
						},
						{
							"consultant_id": 172,
							"consultant_name": "罗小梅",
							"count": 5
						},
						{
							"consultant_id": 198,
							"consultant_name": "吕洁",
							"count": 3
						},
						{
							"consultant_id": 247,
							"consultant_name": "陈湘琴",
							"count": 18
						},
						{
							"consultant_id": 297,
							"consultant_name": "何微",
							"count": 3
						},
						{
							"consultant_id": 274,
							"consultant_name": "刘雪婷",
							"count": 112
						},
						{
							"consultant_id": 299,
							"consultant_name": "邱海溢",
							"count": 46
						},
						{
							"consultant_id": 261,
							"consultant_name": "赵慧琴",
							"count": 20
						},
						{
							"consultant_id": 322,
							"consultant_name": "蓝慧欣",
							"count": 9
						},
						{
							"consultant_id": 331,
							"consultant_name": "郑燕璇",
							"count": 12
						},
						{
							"consultant_id": 339,
							"consultant_name": "李翠银",
							"count": 14
						},
						{
							"consultant_id": 349,
							"consultant_name": "陈小华",
							"count": 3
						},
						{
							"consultant_id": 377,
							"consultant_name": "苏惠芬",
							"count": 3
						},
						{
							"consultant_id": 389,
							"consultant_name": "郁晓婷",
							"count": 94
						},
						{
							"consultant_id": 387,
							"consultant_name": "卢美君",
							"count": 2
						},
						{
							"consultant_id": 193,
							"consultant_name": "财务",
							"count": 1
						},
						{
							"consultant_id": 442,
							"consultant_name": "曾晓慧",
							"count": 1
						}
					],
					"trainer_stat": [{
							"trainer_id": -1,
							"trainer_name": "全部",
							"count": 2348
						},
						{
							"trainer_id": 0,
							"trainer_name": "未选择",
							"count": 2348
						}
					],
					"source_stat": [{
							"source_id": -1,
							"source_title": "全部",
							"count": 2348,
							"source_type": 0
						},
						{
							"source_id": 13,
							"source_title": "户外广告",
							"count": 3,
							"source_type": 1
						},
						{
							"source_id": 0,
							"source_title": "未选择",
							"count": 2264,
							"source_type": 1
						},
						{
							"source_id": 36,
							"source_title": "其它",
							"count": 24,
							"source_type": 1
						},
						{
							"source_id": 100031,
							"source_title": "百度信息流",
							"count": 3,
							"source_type": 1
						},
						{
							"source_id": 100021,
							"source_title": "美团点评电话",
							"count": 2,
							"source_type": 1
						},
						{
							"source_id": 35,
							"source_title": "直接进店",
							"count": 6,
							"source_type": 1
						},
						{
							"source_id": 14,
							"source_title": "会员介绍",
							"count": 23,
							"source_type": 1
						},
						{
							"source_id": 34,
							"source_title": "电话/网络",
							"count": 3,
							"source_type": 1
						},
						{
							"source_id": 100000,
							"source_title": "大众美团",
							"count": 8,
							"source_type": 1
						},
						{
							"source_id": 100022,
							"source_title": "美团点评团购",
							"count": 3,
							"source_type": 1
						},
						{
							"source_id": 100019,
							"source_title": "美团点评",
							"count": 6,
							"source_type": 1
						},
						{
							"source_id": 100032,
							"source_title": "西子",
							"count": 2,
							"source_type": 1
						},
						{
							"source_id": 100026,
							"source_title": "百度商桥对话",
							"count": 1,
							"source_type": 1
						}
					],
					"is_super": 0,
					"activity_list": [{
							"activity_id": "-1",
							"activity_code": "-1",
							"activity_name": "全部"
						},
						{
							"activity_id": "0",
							"activity_code": "0",
							"activity_name": "其他"
						}
					],
					"home_group": [{
							"group_id": -1,
							"group_name": "全部"
						},
						{
							"group_id": 1,
							"group_name": "家庭组"
						},
						{
							"group_id": 0,
							"group_name": "独立"
						}
					],
					"perfect_archive": 0
				}
				this.search.consultantList = data.consultant_stat
				this.search.activitisList = data.activity_list
				this.search.sourceList = data.source_stat
				this.list = [{
						"title": "姓名",
						"code": "name",
						"is_default": 1,
						"is_not_editable": 1,
						"flag": 1
					},
					{
						"title": "性别",
						"code": "sex",
						"is_default": 1,
						"is_not_editable": 1,
						"flag": 1
					},
					{
						"title": "手机号",
						"code": "phone",
						"is_default": 1,
						"is_not_editable": 1,
						"flag": 1
					},
					{
						"title": "当前积分",
						"code": "points",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "会籍顾问",
						"code": "consultant_name",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "活动名称",
						"code": "activity_name",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "渠道来源",
						"code": "source_title",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "录入日期",
						"code": "create_time",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "会员生日",
						"code": "birthday",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "证件号",
						"code": "credential_no",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "备注",
						"code": "notes",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "详细小区名称",
						"code": "housing_estate",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "职业类型",
						"code": "occupation_type",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "行为动态",
						"code": "notes_behavior",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "婚姻情况",
						"code": "marriage",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "孕产情况",
						"code": "pregnancy",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "性格特征",
						"code": "personality_traits",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "收入情况",
						"code": "income_situation",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					}
				]
				var cunList = []
				this.list.forEach(item => {
					if (item.is_default === 1) {
						cunList.push(item)
					}
				})
				this.cunList = cunList
			},
			getList() {
				this.listLoading = true;
				var date = {
					'page': this.listQuery.page,
					'keyword': this.search.name,
					// 'birthday_start': this.search.birthday_start,
					// 'birthday_end': this.search.birthday_end,
					'cards_period_start': this.search.validity_start,
					'cards_period_end': this.search.validity_end,
					// '': this.search.source_id,
					'balance': this.search.balance_id,
					'type': this.search.cardtypeid,
					'types': this.search.typeofid,
					'cardid': this.search.cardnameid,
					'cardstate': this.search.cardstatusid,
					'sort': this.sort
				}
				cardList(date).then(response => {
					const {
						data
					} = response
					this.tableData = data.data
					this.total = data.total
					this.listLoading = false
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.yh_content {
		padding: 20px;
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20px 20px 0px 20px;
	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.topsearch_item {
		/* padding: 20px; */
	}

	.search_left {
		width: 150px;
		font-size: 12px;
		color: #838383;
		margin-bottom: 15px;
	}

	.search_right {
		flex-wrap: wrap;
	}

	.sons {
		margin-left: 20px;
		cursor: pointer;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.choiceme {
		color: rgb(32, 146, 48);
		font-size: 12px;
	}

	.yh_xian {
		border-bottom: 1px solid #e7e7e7;
		/* width: 98%; */
		margin: 0px auto;
		margin-bottom: 20px;
	}

	.yh_qs {
		color: #838383;
	}

	.yh_disJub {
		justify-content: space-between;
	}

	.yh_disJuc {
		justify-content: center;
	}

	.yh_font12 {
		font-size: 12px;
	}

	.yh_font13 {
		font-size: 13px;
	}

	.btn-group_top {
		text-align: right;
	}

	.base-title {
		height: 22px;
		font-size: 12px;
		color: #787878;
	}

	.export-label {
		width: 166px;
	}

	.export-field__item {
		width: 130px;
		margin-bottom: 20px;
	}

	.export-btn-group {
		padding: 30px 0;
		background: #f2f2f2;
		text-align: center;
	}

	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #6b7cdd;
		border-color: #6b7cdd;
	}

	::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background-color: #ffffff;
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__inner:hover {
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #606266;
	}

	::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
		border-color: #fdfeff;
	}

	.date ::v-deep .el-input__inner {
		padding-right: 15px;
	}
</style>